<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="img"><img src="img/04.jpg"/></div>
		<div class="btn">
			<button>收起</button>
			<button>展开</button>
			<button>切换</button>
			<button>切换图片</button>
		</div>
		<script type="text/javascript">
			//window.onload当整个页面（包括图片，css，外部js等）加载完成后，再执行里面的js代码
			window.onload = function(){
				var btn = document.querySelectorAll(".btn button");
				var img = document.querySelector(".img");
				var imgE = img.querySelector("img");
				var imgElw=imgE.offsetWidth,
					imgElh=imgE.offsetHeight;
					img.style.width = imgElw + "px";
					img.style.height =imgElh + "px";
					img.style.overflow = "hidden";
					var num =imgElh;
					btn[0].addEventListener("click",function(){
						var timer=setInterval(function(){
							num-=2;
							img.style.height = num + "px";
							if(num<=0){
								clearInterval(timer);
							}
						},8)
					})
					
					btn[1].addEventListener("click",function(){
							var timer=setInterval(function(){
								num+=2;
								img.style.height = num + "px";
								if(num>=imgElh){
									clearInterval(timer);
								}
							},8)
					})
					
					
			}
			
			
			
		</script>
	</body>
</html>
